<style>
    div[id^='app-'] {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed black;
    }

    dl {
        width: 400px;
        border: 1px dashed #B8B8B8;
        border-top: 0;
        border-radius: 10px;
    }

    dt {
        border-top: 1px dashed #B8B8B8;
        padding: 5px 10px;
        font-weight: 600;
    }

    .first-dt {
        border-radius: 10px 10px 0 0;
    }

    dd {
        margin-left: 0;
        border-top: 1px dashed #B8B8B8;
        padding: 5px 10px;
    }

    dd label {
        width: 20%;
        height: 20px;
        border-radius: 2px;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 0;
        background-color: #f46;
        color: #fff;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }

    dd input {
        display: inline-block;
        vertical-align: middle;
        background: #FAFFBD;
        border: 1px solid #B8B8B8;
        outline: none;
        box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
    }

    dd input:focus {
        border-color: #2188ff;
        box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(3, 102, 214, 0.3);
    }

    dd span {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        color: #D42431;
    }

    .animate {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        background: #2e8b57;
        border-radius: 3px;
        -webkit-animation: animate 3s infinite;
        animation: animate 3s infinite;
    }

    @keyframes animate {
        0% {
            width: 350px;
        }
        to {
            width: 600px;
        }
    }
</style>
<div id="app-1">
    <div v-html="title"></div>
    <input type="text" style="width:300px" v-model="recieveMessage" />
    <div>
        <output v-html="recieveMessage"></output>
    </div>
</div>

<div id="app-2">
    <!-- <div v-show="isNight" ></div> -->
    <!-- <template v-if="isNight">
        <span>🌛</span>
        <span>it's night</span>
    </template> -->
    <div v-if="isNight" style="font-size:30px;color:yellow;background: black;width:300px">
        🌛 it's night
    </div>
    <div v-else style="font-size:30px;color:orange;background: lightblue;width:300px">
        🌑 it's day
    </div>
</div>

<div id="app-3">
    <!-- <dl>
        <dt>不使用key</dt>
        <dd v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
        </dd>
        <dd v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </dd>
        <dd>
            <button @click="troggle">switch</button>
        </dd>
    </dl> -->
    <dl>
        <dt>使用key</dt>
        <dd v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username">
        </dd>
        <dd v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email">
        </dd>
        <dd>
            <button @click="troggle">switch</button>
        </dd>
    </dl>
</div>

<div id="app-4">
    <h3>以一个整数进行遍历</h3>
    <span v-for='n in 10'> {{n}} </span>
    <h3>票房</h3>
    <ul>
        <!-- 测试基本功能 -->
        <!-- <li v-for="(bo,index) of boxOffice"> -->
        <!-- 测试特性key -->
        <!-- <li v-for="(bo,index) in sortBySells" :key="bo.sells" class="animate"> -->
        <!-- 调用一个方法 -->
        <li v-for="(bo,index) in sort(isSort)" :key="bo.sells">
            {{index+1}}、{{bo.name}} {{bo.year}} ({{bo.sells}}$ )
            <ul>
                <li v-for="(value,key,index) of bo.director">{{index+1}}、{{key}}:{{value}}</li>
            </ul>
        </li>
    </ul>

    <button @click="isSort = !isSort" style="margin-left:40px">排序</button>
    <button @click="modifyItem" style="margin-left:20px">vue.set item test</button>
    <button @click="modifyObject" style="margin-left:20px">vue.set object test</button>

    <h3>筛选1</h3>
    <ul>
        <li v-for="bo in beforeYear(highSells(boxOffice))">
            <!-- <li v-for="bo in filterBoxOffice"> -->
            {{bo.name}} {{bo.year}} ({{bo.sells}}$ )
        </li>
    </ul>

    <h3>筛选2</h3>
    <input type="text" v-model="query" />
    <ul>
        <li v-for="bo in queryBo">
            {{bo.name}} {{bo.year}} ({{bo.sells}}$ )
        </li>
    </ul>

    <h3>v-for|if 的优先级</h3>
    <ul>
        <template v-if="boxOffice.length">
            <li v-for="bo in boxOffice" v-if="bo.run">
                {{bo.name}} {{bo.year}} ({{bo.sells}}$ )
            </li>
        </template>
        <li v-else>没有影片</li>
    </ul>
</div>

<div id="app-5">
    <child v-for="bo in boxOffice" :bo="bo" :key="bo.id"></child>
</div>